import { useEffect, useState } from 'react';
import './App.css'

import React from 'react';
import { ImageLoader } from 'three';
import { ModelViewer } from './ModelViewer';


var viewer: ModelViewer | null = null;

function animate(dt: number) {
  requestAnimationFrame(animate);
  viewer?.render(dt);
}
animate(0);

let cnt = 0;

function App() {
  let video = React.createRef<HTMLCanvasElement>();

  let canvas = React.createRef<HTMLCanvasElement>();

  useEffect(() => {
    //init();
    cnt++;
    console.log('init', cnt);
    if (cnt == 2 && canvas.current) {
      //canvas.current.width = window.innerWidth;
      //canvas.current.height = window.innerHeight;
      viewer = new ModelViewer(canvas.current);
      viewer.init();
    }
  }, [])



  return (
    <>
      <canvas ref={canvas} style={{ width: "50vw", backgroundColor: 'red' }} />
      <video id="video" style={{ width: "50vw", backgroundColor: 'blue' }} />
      <button onClick={() => viewer?.openFontCamera()} style={{ position: 'absolute', left: 10, top: 20 }}>Run</button>
      <button onClick={() => viewer?.renderFace()} style={{ position: 'absolute', left: 80, top: 20 }}>render</button>
    </>
  )
}

export default App
